<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图渲染和连线</title>
    <link rel="stylesheet" href="./assets/swiper6/swiper-bundle.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            list-style: none;
            text-decoration: none;
        }

        body,
        html {
            background-color: #333;
        }

        .top {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            border-bottom: 1px solid #fff;
        }

        .topleft,
        .topright {
            position: absolute;
            left: 0;
            top: 0;
            padding: 10px 0 0 10px;
            height: 100%;
            color: white;
            font-size: 14px;
        }

        .topcenter {
            position: absolute;
            top: -1px;
            left: 50%;
        }

        .topcentercont {
            margin-left: -50%;
            width: 500px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border: 1px solid #fff;
            background-color: #333;
            border-radius: 0 0 30px 30px;
            color: white;
            font-size: 30px;
        }

        .topright {
            left: auto;
            right: 0;
            margin-left: 0;
            margin-right: 10px;
            text-align: right;
        }

        .totalbusiness {
            position: fixed;
            right: 5%;
            top: 80px;
            width: 17%;
            min-width: 230px;
            height: 28vh;
            line-height: 28vh;
            color: white;
        }

        .totalbusinessin {
            vertical-align: middle;
            display: inline-block;
            line-height: normal;
        }

        .totalbusiness-bigtitle {
            text-align: center;
            font-size: calc(100vh * .04);
        }

        .totalbusiness-cont {
            padding: 0 20px;
            font-size: calc(100vh * .1);
        }

        .barshow {
            position: fixed;
            top: 100px;
            left: 5%;
            width: 40%;
            height: 27vh;
            /* background-color: rgba(255, 255, 255, .6); */
        }

        .pieshow {
            position: fixed;
            top: 100px;
            left: 47%;
            width: calc(27% - 40px);
            height: 27vh;
            /* background-color: rgba(255, 255, 255, .6); */
        }

        .table {
            position: fixed;
            top: calc(30vh + 100px);
            left: 5%;
            width: 300px;
            min-width: 400px;
            height: 50vh;
            z-index: 2;
        }

        .tabletitle {
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #fff;
            color: white;
            background-color: #777;
        }

        #tabelcont {
            height: calc(100% - 40px);
            overflow: hidden;
        }

        .tablebottom {
            position: absolute;
            bottom: 7vh;
            left: calc(100% + 5vw);
            width: 120px;
            color: white;
        }

        .swiper-slide {
            height: auto;
        }

        #mapshow {
            position: fixed;
            top: 30%;
            right: 0;
            height: 70%;
            min-height: 500px;
        }
    </style>
</head>

<body>

    <!-- 页面：顶部和其他图表 -->
    <div class="top">
        <div class="topleft">运行状况：<br>良好</div>
        <div class="topcenter">
            <div class="topcentercont"><img src="./assets/img/Vue.png"
                    style="position: relative;top: -2px; margin-right: 10px; width: 40px;height: 40px;vertical-align: middle;"
                    alt=""> 全国交易量数据查询
            </div>
        </div>
        <div class="topright">:监督热线<br>0000-00000000</div>
    </div>
    <div class="totalbusiness">
        <div class="totalbusinessin">
            <div class="totalbusiness-bigtitle">总交易量</div>
            <div class="totalbusiness-cont">12亿</div>
        </div>
    </div>
    <div class="barshow" id="barshow"></div>
    <div class="pieshow" id="pieshow"></div>
    <div class="table" id="table">
        <div class="tabletitle">最近成交前一百单</div>
        <div id="tabelcont">
            <div class="swiper" style="height: 100%;">
                <div class="swiper-wrapper" id="swiper-wrapper" style="width: 100%;">
                    <!-- swiper-slide -->
                </div>
            </div>
        </div>
        <div class="tablebottom">
            数据更新时间：<br>
            2020-11-11
        </div>
    </div>
    <!-- 页面：显示地图 -->
    <div id="mapshow"></div>

    <!-- 全局库引入 -->
    <script src="./assets/jquery-1.12.4.js"></script>
    <script src="./assets/echarts5-2-1.js"></script>
    <script src="./assets/echarts-gl.js"></script>
    <script src="./assets/swiper6/swiper-bundle.js"></script>
    <!-- 地图相关的引入数据 -->
    <script src="./assets/city.js"></script>
    <script src="./assets/map.js"></script>
    <!-- charts相关的引入数据 -->
    <script src="./assets/charts-model-data/chartsdata.js"></script>
    <script src="./assets/charts-model-data/chartsinit.js"></script>
    <!-- 表格相关 -->
    <script src="./assets/charts-model-data/table.js"></script>
    <script>

        Object.assign(this, {
            //地图相关
            $echarts: echarts.init(document.getElementById('mapshow')),
            //charts相关
            $barcharts: '',
            $piecharts: '',
            //表格相关
            $swiper: ''
        });

        Object.assign(this, {
            //地图相关
            initmap(res, mapname) {
                echarts.registerMap((mapname.indexOf('100000') != -1 ? 'china' : mapname), res);
                this.$echarts.setOption(maprenderfunction(mapname, res));
                this.$echarts.on('click', (resv) => {
                    return;
                    console.log(resv)
                    var code = ''
                    for (var i = 0; i < Provinces.length; i++) {
                        if (resv.name.indexOf(Provinces[i].name) != -1) {
                            code = Provinces[i].code
                        }
                    }
                    for (var i = 0; i < Citys.length; i++) {
                        if (resv.name.indexOf(Citys[i].name) != -1 && (Citys[i].name.indexOf('上海') == -1 && Citys[i].name.indexOf('北京') == -1 && Citys[i].name.indexOf('重庆') == -1 && Citys[i].name.indexOf('天津') == -1)) {
                            code = Citys[i].code
                        }
                    }
                    //
                    document.getElementById('mapshow').style.pointerEvents = 'none'
                    setTimeout(() => {
                        document.getElementById('mapshow').style.pointerEvents = 'visible'
                        this.changemap(code)
                    }, 800)
                })
            },
            getmap(mapname, iffull) {
                new Promise((res, rej) => {
                    $.ajax({
                        url: 'https://geo.datav.aliyun.com/areas_v3/bound/' + mapname + (iffull ? '_full' : '') + '.json',
                        success: (resv) => {
                            res(resv)
                        },
                        error: (err) => {
                            rej(err)
                        }
                    })
                }).then((res) => {
                    this.initmap(res, mapname)
                }).catch((err) => {
                    this.initmap(chinamapjson, mapname)
                    // return
                    // new Promise((res, rej) => {
                    //     $.ajax({
                    //         url: 'https://geo.datav.aliyun.com/areas_v3/bound/' + mapname + '.json',
                    //         success: (resv) => {
                    //             res(resv)
                    //         },
                    //         error: (err) => {
                    //             rej(err)
                    //         }
                    //     })
                    // }).then((res) => {
                    //     this.initmap(res, mapname)
                    // }).catch((err) => {
                    //     alert('地图初始化失败：' + mapname)
                    // })
                })
            },
            changemap(code) {
                echarts.dispose(document.getElementById('mapshow'))
                this.$echarts = echarts.init(document.getElementById('mapshow'))
                this.getmap(code || '100000', 1)
            },
            //charts相关
            ...charts,
            //表格相关
            ...tables,
            //尺寸相关
            toresetdom() {
                var height = document.getElementById('mapshow').offsetHeight
                document.getElementById('mapshow').style.width = height / .7 + 'px'
                document.getElementById('table').style.width = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - (document.getElementById('mapshow').offsetWidth + document.getElementById('table').offsetLeft) + 'px'
                this.$echarts.resize()
                this.$barcharts && this.$barcharts.resize()
                this.$piecharts && this.$piecharts.resize()
            },
            resetdom() {
                this.toresetdom()
                window.addEventListener('resize', () => {
                    this.toresetdom()
                })
            }
        });

        (() => {
            this.getmap('100000', 1)
            this.barinit(this)
            this.pieinit(this)
            this.tableinit(this)
            this.resetdom()
        })()
    </script>
</body>

</html>